<script lang="ts" setup>
import { ref, defineEmits } from 'vue'
import { useVbenModal } from '@vben/common-ui'
import { message, DatePicker } from 'ant-design-vue'
import dayjs from 'dayjs'
import type { VxeGridProps } from '#/adapter/vxe-table'
import { useVbenVxeGrid } from '#/adapter/vxe-table'
import { getSecondProcurementLog, editPurchaseDetail } from '#/api/goodsPurchaseProgress'

const emit = defineEmits(['fetchData'])
const data = ref<any>({})
const date = ref<any>('')
const purchase_date = ref<any>(dayjs().subtract(4, 'day').startOf('day'))

const [Modal, modalApi] = useVbenModal({
  class: 'w-2/5',
  appendToMain: true,
  cancelText: '关闭',
  confirmText: '保存',
  destroyOnClose: true,
  onCancel() {
    modalApi.close()
  },
  onConfirm() {
    if (!date.value) {
      modalApi.close()
      return
    }
    editPurchaseDetail({
      goods_purchase_detail_id: data.value.info.id,
      second_procurement_review: date.value,
    }).then((res) => {
      message.success('保存成功')
      emit('fetchData')
      modalApi.close()
    })
  },
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      date.value = ''
      data.value = modalApi.getData<Record<string, any>>()
      console.log('isEdit', data.value.isEdit)
      if (!data.value.isEdit) {
        modalApi.setState({
          showConfirmButton: false,
        })
      } else {
        modalApi.setState({
          showConfirmButton: true,
        })
      }
    }
  },
})

interface RowType {
  created_at: string
  realname: string
  action_num: number
  gift_num: number
  total_num: number
  price: number
  total_price: number
  warehouse_name: string
  images: string[]
}

const gridOptions: VxeGridProps<RowType> = {
  pagerConfig: {
    enabled: false,
  },
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'num_text', title: '复期数', width: 150 },
    { field: 'second_procurement_review', title: '复期日期', width: 150 },
    { field: 'realname', title: '操作人', width: 80 },
    { field: 'create_time', title: '操作时间', minWidth: 100 },
  ],
  exportConfig: {},
  height: '380px',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({}) => {
        const res = await getSecondProcurementLog({
          goods_purchase_detail_id: data.value.info.id,
        })
        return res
      },
    },
    sort: true,
  },
  showOverflow: false,
  sortConfig: {
    defaultSort: { field: 'created_at', order: 'desc' },
    remote: true,
  },
}

const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
})

const disabledDate = (current: any) => {
  // console.log(data.value.info.purchase_date, 'data.value.info.purchase_date')
  if (!data.value.info.purchase_date) return current && current < purchase_date.value;
  return current && current < dayjs(data.value.info.purchase_date);
}
</script>

<template>
  <Modal title="采购二次复期">
    <Grid>
      <template #toolbar-actions>
        <div>
          <span>采购复期日期：</span>
          <DatePicker
            v-model:value="date"
            value-format="YYYY-MM-DD"
            :disabled-date="disabledDate"
          />
        </div>
      </template>
    </Grid>
  </Modal>
</template>
